<template>
  <div class="header">
    <h1>我是Header</h1>

    <!-- 渲染数据 -->
    <p>Count的值是{{ count }}</p>
    <p>价格是{{ price }}</p>
    
    <!-- 同步修改数据 -->
    <button @click="add">累加</button>
    <button @click="addN({ n: 100 })">累加n</button>

    <!-- 异步修改数据 -->
    <button @click="waitadd">2秒累加</button>
    <button @click="waitaddN({n: 200})">2秒累加n</button>

  </div>
</template>

<script>
import { mapState  ,mapMutations, mapActions} from 'vuex'
export default {
    name: "Header",
    computed:{
      ...mapState("count" , ["count" , "price"])
    },

    methods:{
      ...mapMutations("count" , ["add" , "addN"]),

      ...mapActions("count" , ["waitadd"  ,"waitaddN"])
    }
    
}
</script>

<style>
.header {
  margin: 30px;
  background: hotpink;
  text-align: center;

}
</style>